<template>
    <div>
        <el-dialog :title="title" @close="setRightDialogClosed" :visible.sync="dialogVisible" :close-on-click-modal="false" width="50%">
            <div class="depeart" v-loading="loading">
                <!-- 文字过滤 -->
                <div class="fx" style="align-items: center;">
                    <el-input size="medium" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
                    <el-button class="mgl-20" size="middle" @click="searchValue()">查询</el-button>
                </div>
                <!-- 树形结构 -->
                <!-- :default-expanded-keys="[2, 3]" 默认展开id为2和3的标签 -->
                <!-- :default-checked-keys="[5]" 默认选中的key -->
                <!-- default-expand-all -->
                <VuePerfectScrollbar class="bg-content pdl-5 pdr-5 pdb-30" style="width:99%;height:450px">
                    <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" 
                        :check-strictly="true"
                        :default-expanded-keys="['00370000000000000000']"
                        :default-checked-keys="defKeys"
                        class="filter-tree mgt-20"
                        :filter-node-method="filterNode" :props="defaultProps">
                    </el-tree>
                </VuePerfectScrollbar>
                <div class="btn-list bgc-white tc mgt-30">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button v-if="setAdmin" type="warning" class="bgc-blue1" @click="modifyAdmin">确 定</el-button>
                    <el-button v-else type="warning" class="bgc-blue1" @click="confirm">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
export default {
    props: {
        treeData: {
            type: Array,
            default: []
        },
        setAdmin: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '部门工号列表'
        },
        expertFlag: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            orgid: '',
            dialogVisible: false,
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            filterText: '',
            // treeData:[],
            loading: false,
            defKeys: [],
            type:''
        }
    },
    mounted() {
    },
    activated() {
    },
    components: {
        VuePerfectScrollbar
    },
    watch: {
        //   filterText(val) {
        //     this.$refs.tree.filter(val);
        //   }
    },
    // created(){
    //     this.$nextTick(()=>{
    //         this.getDepartTree();
    //     })
    // },
    methods: {
        // 监听分配角色对话框的关闭事件
        setRightDialogClosed() {
            this.defKeys = []
        },
        getLeafKeys(node, arr) {
            // 如果当前 node 节点不包含 children 属性，则是三级节点
            if (!node.children || (node.children && node.children.length == 0)) {
                return arr.push(node.id)
            }

            node.children.forEach((item) => {
                this.getLeafKeys(item, arr)
            })
        },
        // 
        handleClose() {
            var param = {};
            var selectInfo = this.$refs.tree.getCheckedNodes();
            var orgId = [];
            var orgName = [];
            var userId = [];
            var isLogin = false;
            var isDepart = false;
            for (var i = 0; i < selectInfo.length; i++) {
                if (selectInfo[i].hasChild) {
                    isDepart = true;
                } else {
                    isLogin = true;
                }
            }
            if (isLogin && isDepart) {
                return this.$message.error('不支持既选部门又选人')
            }
            if (!isLogin && isDepart) { // 选了部门
                return this.$message.error('请选择人员')
            }
            if (selectInfo.length == 0) {
                // return this.$message.error('请至少选择一条记录')
            }
            // if (this.type==='leader' && selectInfo.length > 1) {
            //     return this.$message.error('仅支持选择一个会签领导')
            // }
            // if (this.type === 'zxManager' && selectInfo.length > 1) {
            //     return this.$message.error('仅支持选择一个直线经理')
            // }
            // if (this.type === 'expert' && selectInfo.length > 1) {
            //     return this.$message.error('仅支持选择一个专家')
            // }
            selectInfo.forEach(function (item) {
                orgId.push(item.orgId)
                orgName.push(item.name)
                userId.push(item.id)
            })
            param.orgId = orgId
            param.orgName = orgName
            param.userId = userId
            this.$emit("closeAdd", param);
            this.dialogVisible = false;
        },
        // 确认
        confirm() {
            // this.dialogVisible = false;
            this.handleClose()
        },
        // 配置管理员
        modifyAdmin() {
            var param = {};
            var selectInfo = this.$refs.tree.getCheckedNodes();
            var orgId = [];
            var orgName = [];
            var userId = [];
            var isLogin = false;
            var isDepart = false;
            for (var i = 0; i < selectInfo.length; i++) {
                if (selectInfo[i].hasChild) {
                    isDepart = true;
                } else {
                    isLogin = true;
                }
            }
            if (isLogin && isDepart) {
                return this.$message.error('不支持既选部门又选人')
            }
            // if(isLogin && !isDepart){
            //     return this.$message.error('不支持选人')
            // }
            if (!isLogin && isDepart) { // 选了部门
                return this.$message.error('请选择人员')
            }
            if (selectInfo.length == 0) {
                // return this.$message.error('请至少选择一条记录')
            }
            if (selectInfo.length > 1) {
                return this.$message.error('仅支持配置一个管理员')
            }
            selectInfo.forEach(function (item) {
                orgId.push(item.orgId)
                orgName.push(item.name)
                userId.push(item.id)
            })
            param.orgId = orgId
            param.orgName = orgName
            param.userId = userId;
            this.dialogVisible = false;
            let submitParam = {
                orgId: this.orgid,
                userId: param.userId[0]
            }
            this.$ax.axiosPost('/zuul/userCenter/sysOrUser/setEcoAdmin', submitParam).then(({ data }) => {
                const { resultBody } = data;
                if (data.code == '000000' && resultBody) {
                    this.$message.success('配置生态管理员成功！');
                    this.$emit("closeAdd", param);
                } else {
                    this.$message.error('配置生态管理员失败！');
                }
            })
            console.log(submitParam);
        },
        searchValue() {
            console.log()
            setTimeout(() => {
                this.loading = false;
            }, 1000);
            this.$nextTick(() => {
                this.$refs.tree.filter(this.filterText);
                this.$refs.tree.setCheckedKeys([]);
            })
        },
        // 过滤节点
        filterNode(value, data) {
            this.loading = true;
            if (!value) return true;
            return data.name && data.name.indexOf(value) !== -1;
        },
        initData(data) {
            this.dialogVisible = true;
            this.filterText = '';
            this.orgid = data.orgid;
            this.type = data.type
            
            this.$nextTick(() => {
                this.searchValue();
                this.$refs.tree.setCheckedKeys([]);
                this.defKeys = data.defKeys
            })
        },
        clearSelectedKeys(){
            this.$nextTick(() => {
                this.searchValue();
                this.$refs.tree.setCheckedKeys([]);
                this.defKeys = []
            })
        },
        getCheckedNodes() { // 通过node获取
            console.log(this.$refs.tree.getCheckedNodes());
        },
        getCheckedKeys() { // 通过key获取
            console.log(this.$refs.tree.getCheckedKeys());
        },
        setCheckedNodes() {
            this.$refs.tree.setCheckedNodes([{
                id: 5,
                label: '二级 2-1'
            }, {
                id: 9,
                label: '三级 1-1-1'
            }]);
        },
        setCheckedKeys() {
            this.$refs.tree.setCheckedKeys([3]);
        },
        resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
        }
    }
};
</script>

<style lang="scss" scoped>
.btn-list {
    position: absolute;
    width: 96%;
    bottom: 0;
    padding: 20px 0;
    z-index: 999;
    border-top: 1px solid #ccc;
}

.el-input {
    width: 500px;
}
</style>